บทที่ 14 นาฬิกา ด้วย AJAX
การใช้งาน Auto Refresh ของ AJAX โดยการแสดงเวลาจาก Server ครับ เป็นตัวอย่างเพื่อให้เห็นภาพการร้องขอข้อมูลจาก Server ตลอดเวลา
นาฬิกานี้จะเดินแบบ Real Time โดยใช้เวลาจากฝั่ง Server ครับ ในขณะที่ นาฬิกาโดยทั่วไป จะใช้เวลาบนเครื่องของเรา โค้ดแบ่งออกเป็น 2 ไฟล์นะครับ คือ time.php และ index.php เวลาเรียกก็เรียกที่ index.php ครับ
หน้า index.php หน้าหลัก และ Javascript สำหรับเรียกใช้ AJAX ไม่มีอะไรมากครับ แค่มีพื้นที่ ที่จะแสดงผลข้อมูลที่ร้องจอมาเท่านั้น
หน้า time.php ที่ถูก AJAX เรียก จะอ่านเวลามาแสดงครับ ในทางปฏิบัติ เราสามารถร้องขอข้อมูลอะไรจาก Server ก็ได้ครับ โดยการเปลี่ยนหน้านี้เป็นสิ่งที่ต้องการส่งมาแทน เช่นการ query ข้อมูลออกมาจากฐานข้อมูล
นาฬิกานี้จะเดินแบบ Real Time โดยใช้เวลาจากฝั่ง Server ครับ ในขณะที่ นาฬิกาโดยทั่วไป จะใช้เวลาบนเครื่องของเรา โค้ดแบ่งออกเป็น 2 ไฟล์นะครับ คือ time.php และ index.php เวลาเรียกก็เรียกที่ index.php ครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>นาฬิกา ด้วย AJAX</title>
<meta http-equiv='content-type' content='text/html' charset='windows-874'>
<script language=JavaScript>
var xmlhttp
function Inint_AJAX () {
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlhttp = false;
}
}
if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function startCallback() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
document.getElementById("time").innerHTML=xmlhttp.responseText; //รับค่ากลับมา
delete xmlhttp;
setTimeout("doStart()", 1000);
}
}
}
function doStart() {
xmlhttp = Inint_AJAX();
var url = "time.php";
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = startCallback;
xmlhttp.send(null);
}
</script>
</head>
<body>
<div id="time"> </div>
<script language=JavaScript>doStart();</script>
</body>
</html>หน้า index.php หน้าหลัก และ Javascript สำหรับเรียกใช้ AJAX ไม่มีอะไรมากครับ แค่มีพื้นที่ ที่จะแสดงผลข้อมูลที่ร้องจอมาเท่านั้น
<?
$hour = +0; //ปรับให้ตรงตามต้องการ เช่น เป็นค่าบวก หรือค่าลบ เพื่อให้เวลาของ server ตรงกับเวลาจริง
$min = 0; //ปรับให้ตรงตามต้องการ
$Year = date("Y")+543;
$thaimonth=array("มค.","กพ.","มีค.","เมย.","พค.","มิย.","กค.","สค.","กย.","ตค.", "พย.","ธค.");
//วันที่
$mtoday=date("d ",mktime( date("H")+$hour, date("i")+$min ));
//12:36
$mtime=date("H:i",mktime( date("H")+$hour, date("i")+$min ));
//03 ส.ค. 2544
$mdate=$mtoday. $thaimonth[date("m")-1]." ".$Year;
//Bust cache in the head
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
//always modified
header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header ("Pragma: no-cache"); // HTTP/1.0
header("content-type: application/x-javascript; charset=tis-620");
echo "$mdate $mtime";
?>หน้า time.php ที่ถูก AJAX เรียก จะอ่านเวลามาแสดงครับ ในทางปฏิบัติ เราสามารถร้องขอข้อมูลอะไรจาก Server ก็ได้ครับ โดยการเปลี่ยนหน้านี้เป็นสิ่งที่ต้องการส่งมาแทน เช่นการ query ข้อมูลออกมาจากฐานข้อมูล